<template>
	<u-navbar :leftIconSize="42" titleStyle="font-size:20px;font-weight:600" :autoBack="true" :placeholder='true'
		title="提现">
	</u-navbar>
	<view class="" style="font-size: 14px;height: 119px;background-color: #F7F7F7;padding: 0 15px;width: 100%;">
		<view class="flex-jc-s-b" style="width: 100%;padding-top:40px">
			<text>到账账号</text>
			<view style="display: flex;" @click="goChooseAccount">
				<text class="color-gray" style="padding-right: 10px;" v-if="!data.hasSelectedAccount">请选择到账账号</text>
				<view style="display: flex;padding-right: 20px;align-items: center;" v-if="data.hasSelectedAccount">
					<image src="@/static/image/alipay.png" style="width: 16px;height: 16px;margin-right: 7px;"></image>
					<text class="font-b">支付宝账号({{data.accountItem.account}})</text>
				</view>
				<u-icon size="20" name="arrow-right" color="#999999" ></u-icon>
			</view>
		</view>
		<view style="text-align: center;margin-top: 5px;" class="color-gray" v-if="data.hasSelectedAccount">2小时内到账</view>
	</view>
	<view class="bg-white font-normal" style="padding:0 15px;border-radius: 8px 8px 0 0;padding-bottom: 30px;">
		<view class="color-black font-normal" style="padding-top: 20px;">提现金额</view>
		<view style="display: flex;align-items: center;margin-bottom: 10px;margin-top: 15px;">
			<text class="font-b color-black" style="font-size: 32px;padding-right: 15px;">¥</text>
      <view style="width: 80px">
        <u-input :customStyle="{border: 'none', fontFamily: 'DIN-Bold'}" fontSize="26px" type="number" v-model="data.value" maxlength="3"/>
      </view>
			<text class="color-black-gray">百元</text>
		</view>
		<u-line color="#0000001A"></u-line>
		<view class="font-small" style="margin-top: 10px;">
			<text class="color-gray">当前可提现金额最高为{{data.maxPrice}}元，</text>
			<text class="color-blue2" @click="chooseTotalMoney">全部提现</text>
		</view>
		<view style="padding-top:50px">提现说明</view>
		<view style="padding-top:11px" class="font-small color-gray">
			<view>1.每位用户每天最多提现1次（每日0点刷新提现次数）；</view>
			<view>2.仅支持整百提现；</view>
			<view>3.提现单笔上限为{{data.limitValue}}元；</view>
			<view>4.仅支持提现到支付宝账号。</view>
		</view>
	</view>
	<view class="bottom-bar white-bg" style="padding-top:20px">
		<view style="width: 100%;padding: 0 15px;">
			<u-button :customStyle="{'font-size':'16px'}" type="primary"
				shape="circle" @click="submit">确定</u-button>
		</view>
	</view>

	<u-popup @close="closeHandle" :customStyle="{'border-radius': '8px'}" :show="data.showPayConfirm" mode='center' :safeAreaInsetBottom="false">
		<view class="common-popup text-center">
			<view class="popup-tip">信息确认</view>
			<view style="display: flex;text-align: left;padding:15px 0;">
				<text style="min-width: 100px;">到账账号</text>
				<text>{{data.formatAccount}}</text>
			</view>
			<u-line color="#0000001A"></u-line>
			<view style="display: flex;text-align: left;padding:15px 0;">
				<text style="min-width: 100px;">提现金额</text>
				<text>{{data.value * 100}}元</text>
			</view>
			<u-line color="#0000001A"></u-line>
			<view style="display: flex;text-align: left;padding:15px 0;">
				<text style="min-width: 100px;">验证登录密码</text>
				<u-input  fontSize="14px" placeholder="请输入登录密码" border="none" maxlength="20"
					v-model="data.password" type="password"></u-input>
			</view>
			<u-line color="#0000001A"></u-line>
			<u-button :customStyle="{'width':'132px', 'height':'40px','font-size': '16px', 'margin-top' : '20px'}"
				type="primary" shape="circle" text="确认" @click="confirm"></u-button>
		</view>
	</u-popup>
</template>

<script setup>
	import { ref, reactive } from "vue";
	import { onLoad } from "@dcloudio/uni-app";
	import { countApi, withdrawalAddApi } from "./const";
	import { getConfig } from "../order/const";
import pageRoute from "../../utils/pageRoute";
	const data = reactive({
		hasSelectedAccount: false,
		value: '',
		maxPrice: '',
		limitValue: '',
		info: {},
		accountItem: {},
		showPayConfirm: false,
		formatAccount: ''
	})

	onLoad((options) => {
		ajaxGetLimit()
		ajaxGetCount()

		uni.$on('selectedAccount',selectedAccount)
	})

	const ajaxGetLimit = () => {
		getConfig('withdrawalLimit').then((res) => {
			data.limitValue = res.data.limitPrice
		})
	}

	const ajaxGetCount = () => {
		countApi().then((res) => {
			let balancePrice = res.data.balancePrice
			let value = Math.floor(balancePrice / 100) * 100
			data.maxPrice = value
		})
	}

	const chooseTotalMoney = () => {
    let maxValue
    if(data.maxPrice > data.limitValue) {
      maxValue = Math.floor(data.limitValue / 100)
    } else {
      maxValue = Math.floor(data.maxPrice / 100)
    }
    data.value = maxValue
  }

	const goChooseAccount = () => {
		pageRoute.route('pages/withdrawal/account/query', {code: 'add', id:data.accountItem? data.accountItem.id : ''})
	}

	const selectedAccount = (accountItem) => {
		data.accountItem = accountItem
		if (!accountItem) {
			return
		}
		data.hasSelectedAccount = true
		data.formatAccount = '支付宝账号(' + accountItem.account + ')'
	}

	const submit = () =>{
		if (!data.value || data.value == 0) {
			uni.showToast({title: '请输入提现金额', icon: "none"});
			return
		}

		if (data.value * 100 > data.limitValue) {
			uni.showToast({title: '超出提现限额,无法提现', icon: "none"});
			return
		}
		if (data.value * 100 > data.maxPrice) {
			uni.showToast({title: '超出可提现金额,无法提现', icon: "none"});
			return
		}

		if (!data.hasSelectedAccount) {
			uni.showToast({title: '请选择支付宝账号', icon: "none"});
			return
		}

		data.showPayConfirm = true
	}

	const confirm = () =>{
		if (!data.password) {
			uni.showToast({title: '请输入登录密码', icon: "none"});
			return
		}

		let reqData = {accountId: data.accountItem.id, price: data.value * 100, password: data.password}
		withdrawalAddApi(reqData, addWithdrawalFailHandle).then((res) => {
			pageRoute.routeRedirect('pages/withdrawal/add-success')
		})
	}

	const addWithdrawalFailHandle = (res) =>{
		data.password = ''
		uni.showToast({
			mask: true,
			title: res.msg,
			duration: 1200,
			icon: 'none'
		})
	}
  const closeHandle = () => {
    data.password = ''
    data.showPayConfirm = false
  }

</script>

<style lang="scss" scoped>
	body {
		background-color: white;
	}
</style>
